<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="borrowAmount" label="借款额度" />
      <el-table-column prop="integralStart" label="积分区间开始" />
      <el-table-column prop="integralEnd" label="积分区间结束" />
      <!--1.在这里如何加载出的多行数据-->
      <!--在Vue.js框架中，<router-link> 是 Vue Router 提供的一个组件，用于在不刷新页面的情况下导航到不同的页面。
     <router-link> 标签属于 Vue Router 的标签，它用于创建导航链接，允许用户点击后跳转到对应的路由（页面）。-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--修改，需要先查出当前所指积分信息，显示出来
          然后修改，因此修改需要通过路由，到修改页面
          /代表应用的根路径-->

          <router-link
            :to="'/core/integral-grade/edit/' + scope.row.id"
            style="margin-right:5px;"
          >
            <el-button type="primary" size="mini" icon="el-icon-edit">
              修改
            </el-button>
          </router-link>
          <!--刪除，在当前页面，操作-->
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeById(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
//引入api模块
import integralGradeApi from '@/api/core/integral-grade'
/*@ 是一个别名，通常在Vue.js项目中配置为指向 src 目录。这意味着 @ 代表项目的源代码目录。*/
/*导出一个模块，作为组件*/
export default {
  data() {
    return {
      list: [] //积分等级列表
    }
  },
  /*
  * data() { ... }：这是Vue组件的一个选项，用于定义组件的响应式数据。
  * data 是一个函数，它必须返回一个对象，该对象包含所有需要在组件模板中绑定的数据。*/
  // 勾子函数
  created() {
    this.fetchData()
  },

  methods: {
    fetchData() {
      /*这里可以认为是，integralGradeApi调用list方法，方法内部向前端发送请求，
      然后将请求的内容里面的list给当前页面的list，数据就显示出来了*/
      integralGradeApi.list().then(response => {
        // 前段返回的date是一个map集合，但是后端，为什么可以通过map集合里面的键直接使用元素
        // 后端返回数据的时候，数据会变为JSON对象，JSON对象会被解析为一个普通的对象，而不是Map，因此可以通过response.data.list这样的
        // 语法来访问对象的属性。
        this.list = response.data.list
      })
    },

    removeById(id) {
      // debugger
      console.log('id', id)

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return integralGradeApi.removeById(id)
        })
        .then(response => {
          this.$message({
            message: response.message,
            type: 'success'
          })
          this.fetchData()
        })
        .catch(error => {
          console.log('catch的error', error)
          if (error === 'cancel') {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
    }
  }
}
</script>
<!--在 <style> 标签内部，你可以定义组件的样式。scoped 属性确保样式只应用于当前组件，不会影响到其他组件。-->
<style scoped></style>
